<template>
    <div class="takeout">
        <div class="top">
            <span><i class="iconfont icon-ddingwei-"></i><h6>{{dizhi}}</h6></span>
            <span><img src="../assets/image/tianqi.png" alt=""></span>
        </div>
        <div class="input1"><i class="icon-sousuo1"></i><input type="text" class="top_input" placeholder="搜索商家、商品名称"></div>
        <ul class="ul">  
            <router-link tag="li" to="/pungent">奶茶</router-link>
            <router-link tag="li" to="/pungent">米线</router-link>
            <router-link tag="li" to="/pungent">汉堡</router-link>
            <router-link tag="li" to="/pungent">立减25元</router-link>
            <router-link tag="li" to="/pungent">老麻抄手</router-link>
            <router-link tag="li" to="/pungent">阿泰包子</router-link>
        </ul>
        <mt-swipe :auto="3000" class="tab">
            <mt-swipe-item><img src="../assets/image/tab1.png" alt=""></mt-swipe-item>
            <mt-swipe-item><img src="../assets/image/tab1.png" alt=""></mt-swipe-item>
            <mt-swipe-item><img src="../assets/image/tab1.png" alt=""></mt-swipe-item>
        </mt-swipe>
        <mt-swipe :auto="5000" class="tab1">
            <mt-swipe-item>
               <ul>
                   <li>
                        <router-link tag="dl" to="/home">
                            <dt><img src="../assets/image/10周年11.png" alt=""></dt>
                            <dd>大餐便当</dd>
                        </router-link>
                   </li>
                   <li>
                       <dl>
                           <dt><img src="../assets/image/10周年12.png" alt=""></dt>
                           <dd>汉堡薯条</dd>
                       </dl>
                   </li>
                   <li>
                       <dl>
                           <dt><img src="../assets/image/10周年13.png" alt=""></dt>
                           <dd>炸鸡炸串</dd>
                       </dl>
                   </li>
                   <li>
                       <dl>
                           <dt><img src="../assets/image/10周年14.png" alt=""></dt>
                           <dd>煲仔烧腊</dd>
                       </dl>
                   </li>
                   <li>
                       <dl>
                           <dt><img src="../assets/image/10周年15.png" alt=""></dt>
                           <dd>吃全城</dd>
                       </dl>
                   </li>
               </ul> 
               <ul>
                   <li>
                       <dl>
                           <dt><img src="../assets/image/10周年16.png" alt=""></dt>
                           <dd>准时达</dd>
                       </dl>
                   </li>
                   <li>
                       <dl>
                           <dt><img src="../assets/image/10周年17.png" alt=""></dt>
                           <dd>地方菜系</dd>
                       </dl>
                   </li>
                   <li>
                       <dl>
                           <dt><img src="../assets/image/10周年18.png" alt=""></dt>
                           <dd>麻辣烫</dd>
                       </dl>
                   </li>
                   <li>
                       <dl>
                           <dt><img src="../assets/image/10周年19.png" alt=""></dt>
                           <dd>鸭脖卤味</dd>
                       </dl>
                   </li>
                  <li>
                       <dl>
                           <dt><img src="../assets/image/10周年20.png" alt=""></dt>
                           <dd>美味海鲜</dd>
                       </dl>
                   </li> 
               </ul>  
            </mt-swipe-item> 
            <mt-swipe-item>
               <ul>
                    <li>
                       <dl>
                           <dt><img src="../assets/image/10周年1.png" alt=""></dt>
                           <dd>水果</dd>
                       </dl>
                   </li>
                   <li>
                       <dl>
                           <dt><img src="../assets/image/10周年2.png" alt=""></dt>
                           <dd>美食</dd>
                       </dl>
                   </li>
                   <li>
                       <dl>
                           <dt><img src="../assets/image/10周年3.png" alt=""></dt>
                           <dd>晚餐</dd>
                       </dl>
                   </li>
                   <li>
                       <dl>
                           <dt><img src="../assets/image/10周年4.png" alt=""></dt>
                           <dd>商超便利</dd>
                       </dl>
                   </li>
                   <li>
                       <dl>
                           <dt><img src="../assets/image/10周年5.png" alt=""></dt>
                           <dd>水果</dd>
                       </dl>
                   </li>
               </ul> 
               <ul>
                   <li>
                       <dl>
                           <dt><img src="../assets/image/10周年6.png" alt=""></dt>
                           <dd>美食</dd>
                       </dl>
                   </li>
                   <li>
                       <dl>
                           <dt><img src="../assets/image/10周年7.png" alt=""></dt>
                           <dd>晚餐</dd>
                       </dl>
                   </li>
                   <li>
                       <dl>
                           <dt><img src="../assets/image/10周年8.png" alt=""></dt>
                           <dd>商超便利</dd>
                       </dl>
                   </li>
                   <li>
                       <dl>
                           <dt><img src="../assets/image/10周年9.png" alt=""></dt>
                           <dd>水果</dd>
                       </dl>
                   </li>
                    <li>
                       <dl>
                           <dt><img src="../assets/image/10周年10.png" alt=""></dt>
                           <dd>水果</dd>
                       </dl>
                   </li>
               </ul>
            </mt-swipe-item>   
        </mt-swipe>
        <div class="hy">
            <span><img src="../assets/image/hy.png" alt=""></span>
        </div>
        <div class="jh">
            <span><img src="../assets/image/juhui.png" alt=""></span>
        </div>
        <div class="conter">
            <h4 class="tuijian"><i class="i1"></i>推荐商家<i class="i2"></i></h4>
        <p><span>综合排序</span><span>距离最近</span><span>品质联盟</span><span>删选</span></p>
        </div>
        <div class="content">
            <dl>
                <dt><img src="../assets/image/lmcs.png" alt=""></dt>
                <dd>
                    <h3>老麻抄手</h3>
                    <p><span> 评价4.7 | 月销573 | 免费配送 </span><span>350m|45分钟</span></p>
                </dd>
            </dl>
            <div class="datu">
                <dl>
                    <dt><img src="../assets/image/lmcsd.png" alt=""></dt>
                    <dd>
                        <h4>老麻抄手</h4>
                        <p><br>月售6<br><br><span>{{qian}}</span><i>新用户下单立减17元</i></p>
                    </dd>
                </dl>
            </div>
        </div>
        <router-view></router-view>
        <Footer></Footer>    
    </div>
    
</template>

<script>

import Footer from '@/components/Footer'
export default {
    name: 'takeout',
    data() {
      return {
          dizhi:'北京市昌平区十三陵',
          qian:'￥16'
      }
    },
    components:{
        Footer
    }
}
</script>

<style scoped lang="less">
.takeout{
    margin-bottom: 1.5rem;
}
.top{
    display: flex;
    justify-content: space-between;
    background: #8e49f1;
    span:first-child{
        margin: 0.5rem 0.2rem;
        display: flex;
        color: #fff;
        h6{
            font-size: 0.55rem;
        }
    }
    span:last-child{
        width: 1.95rem;
        height: 0.75rem;
        margin-top: 0.2rem;
        margin-right: 0.2rem;
        img{
            width: 100%;
            height: 100%;
        }
    }
}
.input1{
    position: relative;
    height: 1.5rem;
    background: #8e49f1;
    i{
        position: absolute;
        left: 2.5rem;
        top: 0.3rem;
        font-size: 1rem;
        color: #ccc;
    }
    .top_input{
            width: 10.25rem;
            height: 1.05rem;
            margin: 0 0.20rem;
            text-align: center;
        }
}
    
    .takeout{
        .ul{
            display: flex;
            justify-content: space-between;
            background: #8e49f1;
            padding: 0 0.5rem;
            height: 1rem;
            li{
                font-size: 0.4rem;
                line-height: 1rem;
                text-align: center;
                color: aliceblue;
            }
        }
        .tab{
            height: 3rem;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .tab1{
            height: 4.5rem;
            ul{   
                display: flex;
                margin-top: 0.2rem; 
                height: 1.75rem;
                li{
                    flex: 1;
                    dl{
                        dt{
                            width: 1rem;
                            height: 1rem;
                            margin-bottom: 0.2rem;
                            img{
                                margin-left:0.6rem; 
                                width: 100%;
                                height: 100%;
                            }
                        }
                        dd{
                            text-align: center;
                            font-size: 0.22rem;
                        }
                    }
                }
            }
        }
    }
    .hy{
        height: 1.2rem;
        padding: 0 0.5rem;
        span{
            width: 10.20rem;
            height: 1.2rem;
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
    .jh{
        height: 3.2rem;
        margin-top: 0.6rem;
        padding: 0 0.5rem;
        span{
            width: 10.20rem;
            height: 3.2rem;
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
    .conter{
        .tuijian{
            position: relative;
            margin-top: 0.5rem; 
            font-size: 0.45rem;
            text-align: center;
            .i1{
                position: absolute;
                width: 1rem;
                height: 0.01rem;
                top: 0.15rem;  
                left: 3rem;  
                border-bottom:0.1rem solid #ccc; 
            }
            .i2{
                position: absolute;
                width: 1rem;
                height: 0.01rem;  
                top: 0.15rem;
                right: 3rem; 
                border-bottom:0.1rem solid #ccc;   
            }
            
        }
        p{
            display: flex;
            justify-content: space-between;
            padding: 0.2rem 0.4rem;
            span{
                font-size: 0.4rem;
            }
        }
    }
    .content{
            background: #fff;
            margin-bottom: 0.3rem;
            >dl{
                display: flex;
                padding-top: 0.45rem;
                height: 1.8rem;
                border-top: 0.01rem solid #ccc;
                border-bottom: 0.01rem solid #ccc;
                dt{
                    width: 1.1rem;
                    height: 1rem;
                    flex: 1;
                    padding: 0 0.3rem;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                dd{
                    flex: 6;
                    h3{
                        font-size: 0.45rem;
                    }
                    p{
                        display: flex;
                        margin-top: 0.22rem;
                        font-size: 0.22rem;
                        height: 0.45rem;
                        span{
                            height: 0.45rem;
                            &:last-child{
                                flex: 1;
                                text-align: right;
                                padding-right:0.5rem; 
                            }
                        }
                    }
                }
            }
            .datu{
                background: #fff;
                dl{
                    display: flex;
                    padding: 0.4rem 0;
                    dt{
                        padding:0 0.3rem;
                        width: 2.15rem;
                        height: 2.1rem;
                        img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                    dd{
                        h4{
                            font-size: 0.5rem;
                            color: #118dff;
                        }
                        p{
                            color: #b1b1b1;
                            font-size: 0.28rem;
                            span{
                                margin-top:0.28rem;
                                color: red;
                                font-size: 0.5rem; 
                                padding-right: 0.2rem;
                            }
                            i{
                                margin-top:0.28rem; 
                                border: 0.01rem solid green;
                                padding: 0.01rem;
                                color: green;
                            }
                        }
                    }
                }
            }
        }
</style>
